<script setup>
import { ref, onMounted } from 'vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  ArrowDown,
  User,
  SwitchButton
} from '@element-plus/icons-vue'
import { userGetUserService } from '@/api/user.js'
import { useUserStore } from '@/stores/modules/user.js'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
//是否折叠
const isCollapse = ref(false)
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
const userStore = useUserStore()
onMounted(async () => {
  let response = await userGetUserService()
  // 打印
  console.log(response.data)
  userStore.setUserInfo(response.data.data)
})
const router = useRouter()
const handleCommand = (command) => {
  if (command === 'logout') {
    userStore.setUserInfo({})
    userStore.remToken()
    router.replace('/login')
    ElMessage.info('退出成功！')
  }
  if (command === 'profile') {
    router.push('/user/profile')
  }
}
</script>

<template>
  <div class="main">
    <div class="header">
      <div
        ref="title"
        style="width: 250px; height: 100%; background-color: pink"
        @click="isCollapse = !isCollapse"
      >
        <h1 style="font-style: italic; text-align: center">大世界，大事件</h1>
      </div>
      <div
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-left: 10px;
          flex: 1;
        "
      >
        <div>
          程序员：<strong>{{ userStore.userInfo.nickname || userStore.userInfo.username }}</strong>
        </div>
        <div
          style="margin-right: 50px; display: flex; align-items: center; justify-content: center"
        >
          <div>
            <el-avatar :src="userStore.userInfo.user_pic" />
          </div>
          <div>
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">
                    <template #default>
                      <el-icon><User /></el-icon>
                      基本资料
                    </template>
                  </el-dropdown-item>
                  <el-dropdown-item command="logout">
                    <template #default>
                      <el-icon><SwitchButton /></el-icon>
                      退出登录
                    </template>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>
    </div>
    <div style="display: flex; width: 100%; flex: 1">
      <div>
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          @open="handleOpen"
          @close="handleClose"
          router
        >
          <el-menu-item index="/article/manage">
            <el-icon><icon-menu /></el-icon>
            <template #title>文章管理</template>
          </el-menu-item>
          <el-menu-item index="/article/channel">
            <el-icon><document /></el-icon>
            <template #title>文章分类</template>
          </el-menu-item>
          <el-sub-menu index="/user">
            <template #title>
              <el-icon><location /></el-icon>
              <span>个人中心</span>
            </template>
            <el-menu-item index="/user/profile">基本资料</el-menu-item>
            <el-menu-item index="/user/avatar">更换头像</el-menu-item>
            <el-menu-item index="/user/password">重置密码</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>
      <div style="flex: 1; width: 200px; background-color: #f5f5f5">
        <router-view></router-view>
      </div>
    </div>
    <div class="footer">
      <div>big event ©2024 Created by fantasy</div>
    </div>
  </div>
</template>

<style scoped lang="less">
.main {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.header {
  height: 80px;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.footer {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 250px;
  min-height: 100%;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>
